<template>
	<div class="sudokuLayoutBox">
		<div v-if="tableData !== null" class="sudokuLayoutItems">
			<div class="item" v-for="(item, index) in tableData" :key="index" :style="columnsItem">
				<div class="image" @click="checkImage(item, index)">
					<el-image :src="imageFiled !== '' ? item[imageFiled] : item">
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline"></i>
						</div>
						<div slot="placeholder" class="image-slot">
							加载中<span class="dot">...</span>
						</div>
					</el-image>
					<div class="seeView">
						<i class="el-icon-view"></i>
					</div>
					<div :class="{ changeImage:true, active: item.change}" v-if="isChange" @click.stop="checkData(item, index)">
						<i class="el-icon-check"></i>
					</div>
				</div>
				<div class="info" v-if="infoFiled.length !== 0">
					<div class="infoList" v-for="infoItem in infoFiledData" :key="infoItem">
						{{ item[infoItem] }}
					</div>
				</div>
			</div>
		</div>
		<div class="noData" v-else>
			<div class="icon"><i class="el-icon-folder-opened"></i></div>
			<div class="text">暂无数据</div>
		</div>
		<sudokuCarousel
			v-if="carouselVisible"
			:carouselVisible="carouselVisible"
			:dataList="tableData"
			:imageFiled="imageFiled"
			:initialIndex="itemIndex"
			@close="closeCarousel"/>
	</div>
</template>

<script>
import { deepClone } from './utils.js'
import sudokuCarousel from './components/sudokuCarousel'

export default {
  name: 'celeritySudokuLayout',
  components: {
	sudokuCarousel
  },
  props: {
	tableList: {
		type: Array,
		default: () => []
	},
	isChange: {
		type: Boolean,
		default: true
	},
	isPreview: {
		type: Boolean,
		default: true
	},
	imageFiled: {
		type: String,
		default: ''
	},
	infoFiled: {
		type: Array,
		default: () => []
	},
	columns: {
		type: Number,
		default: 3
	},
	selectType: {
		type: String,
		default: 'multiple'
	},
	imgHeight: {
		type: Number,
		default: 180
	}
  },
  data() {
	return {
		tableData: null,
		// 展示字段信息
		infoFiledData: this.infoFiled,
		carouselVisible: false,
		itemInfo: true,
		itemIndex: 0,
		tableDataList: this.tableList
	}
  },
  computed: {
	columnsItem() {
		const width = (100 / this.columns).toFixed(2)
		const itemStyle = `width: ${width}%; height: ${this.imgHeight}px`
		return itemStyle
	}  
  },
  watch: {
	tableList: function(val) {
		let data = deepClone(val)
		if (this.isChange) {
			data.forEach(res => {
				res.change = false
			})
			this.tableData = data
		} else {
			this.tableData = data
		}
	}
  },
  created() {
	if (this.tableList !== null && this.tableList.length !== 0) {
		this.disposeData()
	}
  },
  methods: {
	// 数据更改
	disposeData() {
		if (this.isChange) {
			this.tableData = deepClone(this.tableList).map(item => ({
				...item,
				change: false
			}))
		} else {
			this.tableData = this.tableList
		}
	},
	// 选中数据：id
	checkData(item, index) {
		// 多选
		if (this.selectType === 'multiple') {
			item.change = item.change ? false : true
		}
		
		if (this.selectType === 'radio') {
			this.tableData.forEach((res, resIndex) => {
				if (resIndex === index) {
					res.change = true
				} else {
					res.change = false
				}
			})
		}
		
		const checkArray = this.tableData.filter(res => res.change)
		this.$emit('change', checkArray)
	},
	// 点击单个弹出大图
	checkImage(item, index) {
		if (this.isPreview) {
			this.itemInfo = item
			this.itemIndex = index
			this.carouselVisible = true
		} else {
			this.$emit('click', item, index)
		}
	},
	// 关闭跑马灯
	closeCarousel() {
		this.carouselVisible = false
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.sudokuLayoutBox .item {
		padding: 6px;
		/* background-color: #fff; */
		box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0);
		transition: .5s
	}
	.sudokuLayoutBox .item:hover {
		box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
		z-index: 2
	}
	.sudokuLayoutBox .image {
		width: 100%;
		height: 100%;
		position: relative
	}
	.sudokuLayoutBox .image .seeView {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		opacity: 0;
		background-color: rgba(0, 0, 0, 0.55);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: .5s;
		cursor: pointer;
	}
	.sudokuLayoutBox .image:hover .seeView {
		z-index: 3;
		opacity: 1;
	}
	.sudokuLayoutBox .image .seeView .el-icon-view {
		color: #fff;
		font-size: 22px;
	}
	.sudokuLayoutBox .image .changeImage {
		cursor: pointer;
		width: 18px;
		height: 18px;
		line-height: 16px;
		color: #fff;
		text-align: center;
		background-color: #fff;
		border: 1px solid #d9d9d9;
		position: absolute;
		border-radius: 4px;
		top: 10px;
		left: 10px;
		font-size: 12px;
		transition: .5s;
		z-index: 5;
	}
	.sudokuLayoutBox .image .changeImage.active {
		background-color: #409eff;
		border-color: #409eff;
	}
	.sudokuLayoutBox .image .el-image {
		display: block;
		cursor: pointer;
		height: 100%;
		background-color: #fafafa;
		border: 1px solid #f0f0f0;
	}
	.sudokuLayoutBox .image .el-image .el-image__inner {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: .5s
	}
	.sudokuLayoutBox .image .el-image:hover .el-image__inner {
		transform: scale(1.1);
	}
	.sudokuLayoutBox .image .image-slot{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f4f4f4;
		padding: 15px 0;
	}
	.sudokuLayoutBox .image .image-slot .el-icon-picture-outline {
		font-size: 36px;
	}
	.sudokuLayoutBox .info {
		margin-top: 10px
	}
	.sudokuLayoutBox .infoList {
		color: #666;
		font-size: 16px;
		margin-bottom: 3px
	}
	.sudokuLayoutBox .infoList:nth-last-of-type(1) {
		margin-bottom: 0
	}
	.sudokuLayoutBox .noData {
		width: 54px;
		margin: 0 auto;
		text-align: center
	}
	.sudokuLayoutBox .noData .icon i {
		font-size: 20px;
		color: #666
	}
	.sudokuLayoutBox .noData .text {
		font-size: 12px
	}
	.sudokuLayoutItems {
		display: flex;
		flex-wrap: wrap
	}
	.sudokuLayoutItems .item {
		box-sizing: border-box
	}
</style>
